<template>
  <div class="tree" style="padding-left: 10px">
    <!-- <div
      @click.stop="clickItem(item)"
      :key="index"
      v-for="(item, index) in data"
    >
      {{ item.title }}
      <TreeItem
        v-if="item?.children?.length"
        @on-click="clickItem"
        :data="item.children"
      ></TreeItem>
    </div> -->
    <div
      @click.stop="_blank(item)"
      class="router"
      :key="index"
      v-for="(item, index) in data"
    >
      {{ item.title }}
      <TreeItem
        v-if="item?.children?.length > 1"
        @on-click="clickItem"
        :data="item.children"
      ></TreeItem>
      <!-- 下面这个有一个二级菜单就展示   -->
      <!-- <TreeItem
        v-if="item?.children?.length"
        @on-click="clickItem"
        :data="item.children"
      ></TreeItem> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
// 递归组件2
import { useRouter } from "vue-router";
const router = useRouter();
type TreeList = {
  name: string;
  path?: string | any;
  icon?: string;
  title?: string;
  children?: TreeList[] | [];
};

type Props = {
  data?: TreeList[];
};
defineProps<Props>();

const emit = defineEmits(["on-click"]);
const clickItem = (item: TreeList) => {
  emit("on-click", item);
};

const _blank = (item: TreeList) => {
  console.log(item);
  // 用path二级路由的路径不完整  会出现问题
  // router.push({
  //   path: item.path,
  // });
  router.push({
    name: item.name,
  });
};
</script>
<script lang="ts">
export default {
  name: "TreeItem",
};
</script>
<style lang="less" scoped>
.tree {
  font-size: 20px;
  .router {
    // border: 1px solid #ccc;
  }
  div {
    padding: 5px;
    &:hover {
      background: yellow;
    }
  }
}
</style>
